// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 作为中间件使用
Vue.use(Vuex)

import state from './state'
import getters from './getters'
import mutations from './mutations'

// 模块化
const moduleBoy = {
  // 命名空间，开启命名空间后，state mutation action getter就都是局部的，调用时需要带上模块名
  namespaced: true,
  state: {
    age: 17
  },
  getters: {
    nextAgeBoy(state) {
      return state.age+1
    }
  }
}
const moduleGirl = {
  // 命名空间
  namespaced: true,
  // 只有state需要带模块名，getter、mutation、action不带模块名
  state: {
    age: 18
  },
  getters: {
    nextAgeGirl(state) {
      return state.age+1
    }
  }
}

const store = new Vuex.Store({
  // 第一个核心，数据存放的位置，类似组件在中的data
  state,
  // 第二个核心：对state中的数据进行深加工，类似组件中的computed
  getters,
  // 第三个核心，修改数据，类似组件中的methods.只能包含同步代码
  mutations,
  // 第四个核心，修改数据，类似组件中的methods，间接地修改数据，可以包含异步代码
  actions: {
    BEOLD(context) {
      // 异步的代码
      context.commit('BEOLD')
    },
    // 获取积分
    // getPointFn是通过axios获取积分的函数，假设积分是666分
    async getPoint ({ commit }) {
      commit('gotPoint', 666)
    },
    // 获取等级
    async getLevel ({ dispatch, commit }) {
      await dispatch('getPoint') // 等待 getPoint 完成
      commit('gotLevel', '嘴强亡者')
    }
  },
  // 第四个核心，模块。一个模块就是一个完整的小仓库，可以有前面的四个核心
  modules: {
    boy: moduleBoy,
    girl: moduleGirl,
  }
})
export default store